<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <!-- <a-page-header title="返回" @back="() => $router.go(-1)" /> -->
    <a-form-model
      :model="info"
      ref="ruleForm"
      :rules="rules"
      @submit.native.prevent
      v-if="JSON.stringify(info) != '{}' && info"
    >
      <a-form-model-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="activityName">
        <a-input size="large" v-model="info.activityName" />
      </a-form-model-item>
      <a-form-model-item label="活动类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
        <a-radio-group v-model="info.categoryId">
          <a-radio :value="1">活动列表</a-radio>
          <a-radio :value="2">个人中心</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
        <single-image :url="info.image" @ok="(url) => (info.image = url)"></single-image>
        <span>（建议420px * 236px的图片）</span>
      </a-form-model-item>
      <a-form-model-item label="设置报名" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="info.isSignup">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="跳转小程序" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="info.isJump">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="小程序appId" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="info.isJump == 1">
        <a-input size="large" v-model="info.wxAppid" />
      </a-form-model-item>
      <a-form-model-item label="小程序页面路径" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="info.isJump == 1">
        <a-input size="large" v-model="info.wxPage" />
      </a-form-model-item>
      <a-form-model-item label="活动跳转地址" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="info.isJump == 0">
        <a-input size="large" v-model="info.url" />
      </a-form-model-item>
      <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number size="large" v-model="info.sort" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
        <a-radio-group v-model="info.status">
          <a-radio :value="1">上架</a-radio>
          <a-radio :value="0">下架</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="活动简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-textarea v-model="info.activityIntro" :rows="5" />
      </a-form-model-item>
      <a-form-model-item label="活动详情" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <editor
          class="editor"
          :value="info.activityDesc"
          @change="(res) => (info.activityDesc = res)"
          style="height: 100%"
        ></editor>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
          >保存</a-button
        >
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import SingleImage from '@/components/Upload/SingleImage'
import Editor from '@/components/Editor/TinyMceEditor'

export default {
  name: 'ActivityEdit',
  components: {
    SingleImage,
    Editor
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      userList: [],
      rules: {
        activityName: [{ required: true, message: '活动名称必填', trigger: ['blur', 'change'] }],
        categoryId: [{ required: true, message: '活动类型必选', trigger: ['blur', 'change'] }],
        status: [{ required: true, message: '活动状态必选', trigger: ['blur', 'change'] }]
      },
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      types: [],
      actives: [],
      cates: [],
      value: '线下'
    }
  },
  created() {},
  mounted() {
    // 获取信息
    this.formInit()
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.info = {
          activityName: '',
          categoryId: 1,
          status: 1,
          image: '',
          isJump: 0,
          isSignup: 0,
          wxAppid: '',
          wxPage: '',
          sort: ''
        }
      }
    },
    onDateChange(date, dateString) {
      console.log(date, dateString)
      // this.info.momentDeadline = date
      this.info.startTime = dateString[0]
      this.info.endTime = dateString[1]
    },
    // 获取权限列表
    getAuthoryList() {
      this.loading = true
      const params = {}
      this.$common
        .fetchList('/authorities/lists', params)
        .then((data) => {
          this.loading = false
          if (data.code === 200) {
            const result = data.result
            this.authoryData = result
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
    },
    // 编辑信息
    getInfo() {
      this.$common.handleGet('/activities/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          console.log(result)
          result.categoryId = +result.categoryId
          result.isJump = +result.isJump
          result.isSignup = +result.isSignup
          result.status = +result.status
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'ActivityList' })
        }
      })
    },

    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (!this.info.image) {
          this.$message.error('图片必传')
          valid = false
        }
        console.log(this.info)
        if (this.info.isJump === 1 && this.info.wxAppid === '') {
          this.$message.error('小程序appId必填')
          valid = false
        }
        if (valid) {
          this.id ? handleFormData('/activities/' + this.id) : handleFormData('/activities/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      this.$common
        .handlePost(url, this.info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
              this.$router.push({ name: 'ActivityList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>

<style scoped lang="less"></style>
